<div v-bind:class="[componentId]">
    <cly-header>
        <template v-if="back" v-slot:header-top>
            <cly-back-link v-on:click="goBack" :title="i18n('plugins.back')"></cly-back-link>
        </template>
        <template v-slot:header-left>
            <h2> {{i18n('systemlogs.title')}} </h2>
        </template>
    </cly-header>
    <cly-main>
		<cly-date-picker-g class="bu-mb-4"></cly-date-picker-g>
		<cly-section class="bu-mt-4">
			<cly-datatable-n :data-source="remoteTableDataSource" :export-api="getExportAPI" :default-sort="{prop: 'ts', order: 'descending'}" @row-click="handleTableRowClick" ref="table" :row-class-name="tableRowClassName">
                <template v-slot="scope">
                    <el-table-column type="expand">
                        <template slot-scope="rowScope">
                            <expand-table v-if="detailData[rowScope.row._id]" :row="detailData[rowScope.row._id]"></expand-table>
                        </template>
                    </el-table-column>
                    <el-table-column sortable="custom" prop="ts" :label="i18n('systemlogs.timestamp')">
                        <template slot-scope="scope">
                            {{scope.row.displayTs}}
                        </template>
                    </el-table-column>
                    <el-table-column sortable="custom" prop="u" :label="i18n('systemlogs.user')">
                        <template slot-scope="scope">
                            <a :href='scope.row.href' :title='scope.row.u'>{{scope.row.u}}</a>
                        </template>
                    </el-table-column>
                    <el-table-column sortable="custom" prop="ip" :label="i18n('systemlogs.ip-address')"></el-table-column>
                    <el-table-column :label="i18n('systemlogs.action')">
                        <template slot-scope="scope">
                            <p>{{scope.row.actionName}}</p>
                            <p v-if="scope.row.app_name" :title="scope.row.i.app_id">{{scope.row.app_name}}</p>
                            <p v-if="scope.row.user_name" :title="scope.row.i.user_id">{{scope.row.user_name}}</p>
                            <p v-if="scope.row.campaign_id" :title="scope.row.i.campaign_id">{{scope.row.campaign_id}}</p>
                            <p v-if="scope.row.crash_id" :title="scope.row.i.crash_id">{{scope.row.crash_id}}</p>
                            <p v-if="scope.row.appuser_id" :title="scope.row.i.appuser_id">{{scope.row.appuser_id}}</p>
                            <p v-if="scope.row.name" :title="scope.row.name">{{scope.row.name}}</p>
                        </template>
                    </el-table-column>
                </template>
                <template v-slot:header-left>
                    <cly-select-x
                        :search-placeholder="i18n('common.search')"
                        placeholder=""
                        v-model="selectAction"
                        v-on:change="changeAction"
                        :options="allActions">
                    </cly-select-x>
                    <cly-select-x
                        :search-placeholder="i18n('common.search')"
                        placeholder=""
                        v-model="selectUser"
                        v-on:change="changeUser"
                        :options="allUsers" class="bu-ml-4">
                    </cly-select-x>
                </template>
            </cly-datatable-n>
		</cly-section>
    </cly-main>
</div>